'use client';

import DefaultImage from '@/asset/default-image.png';
import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '../ui/dialog';
import QueryImage from './query-image';

export default function ImagePreview({
  imageKey,
  button,
}: {
  imageKey?: string | null;
  button: React.ReactNode;
}) {
  const [open, setOpen] = useState(false);
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <div onClick={() => setOpen(true)} className="cursor-pointer">
          {button}
        </div>
      </DialogTrigger>
      <DialogContent className="p-0 bg-transparent border-0 outline-none">
        <DialogHeader className="space-y-4 hidden">
          <DialogTitle />
          <DialogDescription />
        </DialogHeader>
        <QueryImage
          imageKey={imageKey}
          defaultImage={DefaultImage}
          imgClassName="w-full "
        />
      </DialogContent>
    </Dialog>
  );
}
